<template>
  <div>
    <!--信息-->
    <!--<div class="pub-bg">-->
    <!--<div class="flex-line center title">-->
    <!--<p />综合信息-->
    <!--</div>-->
    <!--<el-row :gutter="10" class="mt-20">-->
    <!--<el-col :span="8">-->
    <!--<div class="flex-line center justify ">-->
    <!--<div class="flex-20 pie-text">-->
    <!--<p>本月营收(元)</p>-->
    <!--<p>¥<span>10</span></p>-->
    <!--</div>-->
    <!--<div id="pieOne" class="pie-size" />-->
    <!--</div>-->
    <!--</el-col>-->
    <!--<el-col :span="8">-->
    <!--<div class="flex-line center justify">-->
    <!--<div class="flex-30 pie-text">-->
    <!--<p>托班在园(个)</p>-->
    <!--<p><span>10</span>个</p>-->
    <!--</div>-->
    <!--<div id="pieTwo" class="pie-size" />-->
    <!--</div>-->
    <!--</el-col>-->
    <!--<el-col :span="8">-->
    <!--<div class="flex-line center justify">-->
    <!--<div class="flex-30 pie-text">-->
    <!--<p>客单价(元/合同)</p>-->
    <!--<p>¥<span>10</span></p>-->
    <!--</div>-->
    <!--<div id="pieThree" class="pie-size" />-->
    <!--</div>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</div>-->
    <!--/信息-->
    <!--折线图-->
    <div class="pub-bg mt-20">
      <div class="flex-line center title">
        <p />收入概况
      </div>
      <div id="chartsOne" class="echart-size" />
    </div>
    <!--/折线图-->
    <div class="pub-bg mt-20" style="background: transparent;">
      <div class="flex-line center title">
        <p />收入明细
      </div>
      <s-table class="mt-20" :data-pops="tableObj.data" :column="tableObj.column" />
    </div>
  </div>
</template>

<script>
// import echartsMixin from '@/components/Basic/Charts/mixins/resize'
// import echarts from 'echarts'
import * as echarts from 'echarts'
import { finIncomeCurveByYear } from '@/api/dashboard'
export default {
  // mixins: [echartsMixin],
  data () {
    return {
      curTabKey: 0,
      tabs: [
        { key: 0, title: '综合态势' },
        { key: 1, title: '综合详细' },
        { key: 2, title: '运营态势' },
        { key: 3, title: '健康态势' }
      ],
      tableObj: {
        column: [{
          prop: 'created',
          label: '时间'
        },
        {
          prop: 'totalAmount',
          label: '实际营收(元)'
        },
        {
          prop: 'count',
          label: '收费单数'
        }],
        total: 0,
        data: []
      }
    }
  },
  watch: {
    curTabKey (val) {
      console.log(val)
      // this.getCourses()
    }
  },
  created () {

  },
  mounted () {
    this.getYearData()
    this.pieChartsFun('One')
    this.pieChartsFun('Two')
    this.pieChartsFun('Three')
  },
  methods: {
    pieChartsFun (type) {
      const total = 1688
      let title = '完成率'
      let color = '#1890FF'
      if (type === 'Two') {
        title = '男生数量'
        color = '#FF4070'
      } else if (type === 'Three') {
        title = '女生数量'
        color = '#FF4837'
      }
      var myChart = echarts.init(document.getElementById(`pie${type}`))
      var option = {
        title: {
          text: '{value|' + total + '}' + '\n' + '{text|' + title + '}',
          top: 'center',
          left: '46%',
          textAlign: 'center',
          textStyle: {
            rich: {
              value: {
                color: color,
                fontSize: 18,
                fontWeight: 'bold',
                lineHeight: 30
              },
              text: {
                color: color,
                fontSize: 12
                // lineHeight: 30
              }
            }
          }
        },
        grid: {
          left: '5%',
          right: '0%',
          bottom: '5%',
          top: '2%',
          containLabel: true
        },
        textStyle: {
          color: '#fff'
        },
        series: [{
          name: '12',
          type: 'pie',
          radius: ['90%', '99%'],
          color: [color, '#efefef'],
          data: [{ value: 20, name: 'Search Engine' },
            { value: 80, name: 'Direct' }],
          itemStyle: {
            normal: {
              label: {
                show: false,
                formatter: '{b}:{c}%'
              }
            }
          },
          labelLine: {
            show: false
          }
        }]
      }
      myChart.setOption(option)
    },
    lineChartsFun (values = []) {
      const myChart = echarts.init(document.getElementById(`chartsOne`))
      const show = values.length === 0
      const options = {
        title: {
          text: '暂时没有数据',
          show: show,
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 10
          }
        },
        grid: {
          top: 40,
          left: 60,
          right: 20,
          bottom: 20
        },
        xAxis: {
          type: 'category',
          data: values.map(x => x.created)
        },
        yAxis: {
          type: 'value'
        },
        lineStyle: {
          color: '#5470C6'
        },
        itemStyle: {
          color: '#5470C6'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          formatter: params => {
            const data = params[0]
            const dataIndex = data.dataIndex
            const item = values[dataIndex]
            return `<div class="echartsTooltop"><p>金额: ${item.totalAmount}元</p><p>收费账单数量: ${item.count}</p></div>`
          }
        },
        series: [
          {
            data: values.map(x => x.totalAmount),
            type: 'line',
            smooth: true
          }
        ]
      }
      myChart.setOption(options)
    },

    getYearData () {
      finIncomeCurveByYear().then(res => {
        console.log(res)
        this.lineChartsFun(res)
        this.tableObj.data = res
      })
    }
  }

}
</script>

<style lang='scss' scoped>
.pub-bg {
  background: #FAFAFD;
  border-radius: 8px;
  padding: 24px;
}
.title {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.echart-size {
  width: 100%;
  height: 400px;
}
.info-item {
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px 20px 20px;
  margin-top: 20px;
  p {
    font-size: 14px;
    color: #666;
    span {
      color: #333333;
      font-size: 28px;
      font-weight: bold;
      padding-right: 5px;
      font-family: PingFang SC;
    }
    &.text {
      color: #333333;
    }
  }
}
.pie-size {
  width: 120px;
  height: 120px;
  margin: 20px 0 0 0;
}
.pie-text {
  span {
    font-weight: bold;
    font-size: 38px;
  }
  p {
    font-size: 16px;
  }
}
::v-deep {
  .el-radio-button__inner {
    // color: #fff;
  }
}
</style>
